<script setup>
import api from '../api/Post_api.js'
import loginApi from '@/api/Login_api.js';
import { computed, ref, onMounted } from 'vue'
import lodash from "lodash";
import {ElMessage, ElMessageBox} from "element-plus";

const editWinVisible = ref(false);
const loading = ref(false)
//查询数据
const serchObj = ref({
  current:1,
  limit:10,
  total:0,
  userId:'',
  typeId:'',
  postTitle:'',
  postContent:'',
  postSummary:'',
  status:'',
  isVisible:''
})
const tabledata = ref([]);
onMounted(async ()=>{
  await fetchLoginInfo();
});
const handleDel = (index, row) => {
  ElMessageBox.confirm(
      '是否确定注销该用户',
      '注意！',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async() => {
        await api.del(row.id);
        serchObj.value.current=1;
        fetchLoginInfo();
        ElMessage.success('注销成功');
      })
      .catch(() => {
        ElMessage.success('注销失败');

      })
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '是否确定注销该用户',
      '注意！',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async() => {
        await api.delete(row.id);
        serchObj.value.current=1;
        fetchLoginInfo();
        ElMessage.success('注销成功');
      })
      .catch(() => {
        ElMessage.success('注销失败');

      })
}
const fetchLoginInfo = async () => {
  loading.value = true
  const res = await loginApi.loginInfo();
  tabledata.value = await api.getPostsByUser(res.id);
}
const obj =ref({});
const handleEdit = (index, row) => {
  obj.value=lodash.clone(row);
  editWinVisible.value = ref(true);
  console.log(index,row);
}
const editCancel =()=>{
  obj.value={};
  editWinVisible.value = false;
}
const editCommit=async ()=>{
  await api.edit(obj.value);
  editWinVisible.value = false;
  fetchLoginInfo();
  ElMessage.success("修改成功");
}
</script>

<template>
  <!-- 修改点4：确保使用正确的filteredData -->
  <el-table :data="tabledata" style="width: 100%">
    <!-- 修改点5：检查prop是否与API返回字段一致 -->
    <el-table-column label="帖子类型" prop="typeId" width="120"/>
    <el-table-column label="帖子标题" prop="postTitle" width="240"/>
    <el-table-column label="帖子摘要" prop="postSummary" width="450"/>
    <el-table-column label="帖子状态" prop="status" width="120"/>
    <el-table-column label="是否可见（0不可见，1可见）" prop="isVisible" width="120"/>
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row)">隐藏</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 编辑对话框 -->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="obj">
      <el-form-item label="帖子类型" :label-width="100">
        <el-input v-model="obj.typeId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="帖子标题" :label-width="100">
        <el-input v-model="obj.postTitle" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="帖子正文" :label-width="100">
        <el-input v-model="obj.postContent" autocomplete="off" type="textarea" style="width: 100%; line-height: 1.5"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
